<!--
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-05-17 22:48:58
 * @LastEditTime: 2022-05-20 21:56:27
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description:
-->
<template>
  <div
      id="guide-start"
      @click="onClick"
   >
    <el-tooltip
      effect="dark"
      :content="$t('navBar.guide')"
      placement="bottom"
    >
    <div>
      <svg-icon icon="guide" ></svg-icon>
    </div>
    </el-tooltip>
  </div>
</template>

<script setup>
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import { onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import steps from './steps'

const i18n = useI18n()
let driver = null
onMounted(() => {
  driver = new Driver({
    // opacity: 0.1,
    animate: false, // 设置 false: 会没有动画, opacity 失效
    // 禁止点击蒙版关闭
    allowClose: false,
    closeBtnText: i18n.t('guide.close'),
    nextBtnText: i18n.t('guide.next'),
    prevBtnText: i18n.t('guide.prev')
  })
})
const onClick = () => {
  console.log(123)
  driver.defineSteps(steps(i18n))
  driver.start()
}
</script>

<style lang="scss" scoped></style>
